﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/basejs.js"></script>
    <script src="../Scripts/Gridjs.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body >
    <div id="div_ptb_box1" >
        <form fm-search>
            <input type="text" name="searchKey" placeholder="输入子站名称" />
            <input type="submit" value="查询" />
        </form>
        <table class="table table-striped table-bordered table-condensed">
            <tr>
                <th width="30%" >标题</th>
                <th width="40%">简介</th>
                <th width="30%">时间</th>
            </tr>
        </table>
        <table fm-body class="table table-striped table-bordered table-condensed">
            <tr>
                <td width="30%"><a target="_blank" href="/static/html/DetailDemo01.html?id={{Id}}">{{Title}}</a></td>
                <td width="40%" fm-conver="converstr">{{Summary}}</td>
                <td width="30%" fm-conver="convertime">{{IniTime}}</td>
            </tr>
        </table>
        <div fm-pagerbox class="pagination"></div>
    </div>
    <input type="button" id="btnreload"  value="reload"/>

    <input type="button" id="btnrefresh" value="refresh" />

    <script>
        
        $(document).ready(function () {

           var app1 = $("#div_ptb_box1").Grid({
               url: "/articles",//ajax请求路径 与data 同为选选 返回值必须是 {Data:[{},{},{}],Count:100}格式 Data：数据列表,Count:返回数据源的总项数
               //click: function (row) { alert(row.Title) },//单击事件
               dbclick: function (row) {
                   window.open("/static/html/DetailDemo01.html?id="+row.Id);
               },//双击时间
               page:{
                   //click:function(index){alert(index)},//分页事件
                   pageSize: 5,//可选 (默认30)
                   pageIndex: 0,//可选 (默认1)
                   reqindex: "index",//url请求中的起始页 可选 (默认 pageindex )
                   reqsize: "size",//url请求中的每页大小 可选 (默认 pagesize )
                   back: "上一页",//可选 (默认 <)
                   next: "下一页" //可选 (默认 >)
               }
           });
            //app1.reload();
           $("#btnreload").click(function () {
               app1.reload();//刷新整个grid
           });

           $("#btnrefresh").click(function () {
               app1.refresh();//刷新当前分页
           });

        });

        

        function converage(obj) {
            return obj + "岁";
        }

        function convertime(obj) {
            return obj.substring(0,10);
        }

        function converstr(obj){
            return obj.substring(0,30);
        }
    </script>
</body>

</html>
